<template>
  <div class="profile">
    <v-card style="overflow: auto">
      <v-img
        height="10vh"
        :src="url"
      >
      </v-img>
      <v-card-text class="profileMsg">
        <v-avatar
        class="avatar"
          size="80">
          <img :src="this.$store.state.user.userAvatar" alt="John" />
        </v-avatar>
        <div class="profileContent">
          <div>{{this.$store.state.user.userName}}</div>
          <div>账号:{{this.$store.state.user.userEmail}}</div>
          <hr>
        </div>
      </v-card-text>
    </v-card>
<!--    修改用户信息按钮组件-->
    <UpdateInfo />
<!--    退出登录组件-->
    <OutLogin />
  </div>
</template>

<script lang='ts'>
import Vue from "vue";
import UpdateInfo from "./UpdateInfo/UpdateInfo.vue";
import OutLogin from "@/views/User/Profile/OutLogin/OutLogin.vue";
import {getPro,getProAns} from '@/api/pic'
export default Vue.extend({
  name: "Profile",
  components: {
    UpdateInfo,
    OutLogin
  },
  data: () => ({
    url: ''
  }),
  mounted(){
    getPro().then(res => {
      const {code,url} = res as unknown as getProAns
      if(code === 200){
        this.url = url
      }
    })
  }
});
</script>

<style lang='scss'>
.profile {
  .avatar {
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    top: -35%;
  }
  .profileMsg{
    position: relative;
  }
  .profileContent {
    font-size: 5vw;
    padding:  0 10vw;
    margin-top: 4vh;
    div {
      margin-bottom: 2vh;
      text-align: center;
    }
    
  }
}
</style>